import React, { useEffect, useState } from 'react';
import { getTourist } from '@/api/service'
import { Table, Tag } from 'antd';
import { useAddkey } from '@/hooks/index'

const columns = [
  {
    title: 'ID',
    dataIndex: 'vid',
    key: 'vid',

  },
  {
    title: '游客ID',
    dataIndex: 'visitor_id',
    key: 'visitor_id',
  },
  {
    title: '游客名称',
    dataIndex: 'visitor_name',
    key: 'visitor_name',
  },
  {
    title: '游客头像',
    key: 'visitor_avatar',
    dataIndex: 'visitor_avatar',
    render: (item: any) => {


      return <img src={`http://fangadmin.shbwyz.com${item}`} style={{ width: "50px", height: "50px" }} />
    }

  },
  {
    title: '在线状态',
    key: 'online_status',
    dataIndex: 'online_status',
    render: (item: any) => {
      return <span>
        {item === 1 ? <Tag color="success">在线</Tag> : <Tag color="error">离线</Tag>}
      </span>
    }
  },
  {
    title: 'IP',
    key: 'visitor_ip',
    dataIndex: 'visitor_ip',

  },
  {
    title: '创建时间',
    key: 'create_time',
    dataIndex: 'create_time',

  },
];

export default function visitor() {
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(1);
  useEffect(() => {
    getTourist().then(({ data }) => {
      useAddkey(data.data);
      setData(data.data);
      setTotal(data.count)
    })
  }, [])
  return <div>
    <Table
      columns={columns}
      pagination={{
        total,
        pageSize: 5,
        showQuickJumper: true
      }}
      dataSource={data}
    />
  </div>;
}
